<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
		div{
			width: 100px;
			height: 100px;
			position: relative;
			animation: example 2s;
			animation-iteration-count: infinite;
			animation-direction: alternate-reverse; 
			background-color: aquamarine;
		}
		@keyframes example{
			
                    
					0%   {-webkit-transform: rotate(0deg); background-color:red; left:0px; top:0px;}
                
				
                    
					100% {-webkit-transform: rotate(360deg); background-color: aqua; left :200px; top:0px;} 
                
			
		
			 
			 
			  
		/* 	  25%  {background-color:yellow; left:200px; top:0px;}
			  50%  {background-color:blue; left:200px; top:200px;}
			  75%  {background-color:green; left:0px; top:200px;}
			  100% {background-color:red; left:0px; top:0px;} */
			}
			
		}
	</style>
	</head>
	<body>
		<div ></div>
	</body>
</html>